<template>
  <view class="tab-content">
    <view v-if="noData" class="no-data">暂无查到数据</view>
    <view v-else class="vehicle-info">
      <view
        class="info-row"
        v-for="(value, key) in vehicleInfoFields"
        :key="key"
      >
        <text class="vehiclelabel">{{ key }}</text>
        <text class="vehiclevalue">{{ value || "暂无数据" }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ["vehicleData"],
  data() {
    return {
      noData: false,
    };
  },
  computed: {
    vehicleInfoFields() {
      if (!this.vehicleData || Object.keys(this.vehicleData).length === 0) {
        this.noData = true;
        return {};
      }
      this.noData = false;
      return {
        是否挂车: this.vehicleData.isTrailer ? "是" : "否",
        规格: this.vehicleData.vehicleType || "重型",
        结构: this.vehicleData.vehicleStructure || "厢式货车",
        车辆行业类别: this.vehicleData.industryCategory || "道路普通货物运输",
        厂牌: this.vehicleData.brand || "东风牌",
        型号: this.vehicleData.model || "DFL5235XXYAX1B",
        发动机型号: this.vehicleData.engineModel || "ISDe27040",
        发动机号码: this.vehicleData.engineNo || "78348441",
        发动机功率: this.vehicleData.enginePower || "198kw",
        车辆识别VIN码: this.vehicleData.vin || "LGAX4C357G3018190",
      };
    },
  },
};
</script>

<style scoped lang="scss">
.tab-content {
  .no-data {
    text-align: center;
    color: #79829c;
    padding: 20px;
    font-size: 16px;
  }
  .info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .vehiclelabel {
      color: #79829c;
    }
    .vehiclevalue {
      color: #0d1444;
    }
  }
}
</style>
